<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
        <h:outputStylesheet library="styles" name="styles.css" />
    </h:head>
    <h:body>
        <f:view id="wholeView">
            <div class="headerWrapper">
                <ui:insert name="header" >
                    <ui:include src="/pages/common/header.xhtml" />
                </ui:insert>
            </div>
            <div class="contactFormHolder">
                <h:form id="contactsForm">

                    <h:panelGrid columns="3" id="newContactForm" styleClass="contactForm"> 
                        <h:outputText value="Name: " />
                        <h:inputText id="newContactName" value="#{contactsBean.newContact.name}">
                            <!--
                            <f:validateRegex pattern="[A-Z][a-z]*" />
                            <f:ajax event="change" execute="contactsForm" render="contactsForm"/>
                            -->
                        </h:inputText>
                        <h:message styleClass="errorMessage" for="newContactName" />

                        <h:outputText value="Surname: " />
                        <h:inputText id="newContactSurname" value="#{contactsBean.newContact.surname}">
                            <!--
                            <f:validateRegex pattern="[A-Z][a-z]*" />
                            <f:ajax event="change" execute="contactsForm" render="contactsForm"/>
                            -->
                        </h:inputText>
                        <h:message styleClass="errorMessage" for="newContactSurname" />

                        <h:outputText value="Phone: " />
                        <h:inputText id="newContactPhone" value="#{contactsBean.newContact.telephone}" />
                        <h:message styleClass="errorMessage" for="newContactPhone" />

                        <h:outputText value="Email: " />
                        <h:inputText id="newContactEmail" value="#{contactsBean.newContact.email}" />
                        <h:message styleClass="errorMessage" for="newContactEmail" />

                        <h:commandButton value="Add contact">
                            <f:ajax event="click" execute="contactsForm" render="@form" listener="#{contactsBean.storeContact}" />
                        </h:commandButton>
                    </h:panelGrid>

                    <h:dataTable id="contactList" class="contactList" var="contact"                                  
                                 value="#{contactsBean.contacts}"
                                 binding="#{contactsBean.dataTable}" >

                        <h:column>
                            <f:facet name="header">Name</f:facet>
                            #{contact.surname} #{contact.name}
                        </h:column>
                        <h:column>
                            <f:facet name="header">Email</f:facet>
                            #{contact.email}
                        </h:column>
                        <h:column>
                            <f:facet name="header">Phone</f:facet>
                            #{contact.telephone}
                        </h:column>
                        <h:column>
                            <f:facet name="header"></f:facet>
                            <h:commandLink styleClass="deleteLink" value="delete">                                    
                                <!--
                                <f:param name="contactId" value="${contact.id}" />
                                -->
                                <f:ajax event="click" render="@form" listener="#{contactsBean.removeContact}" />
                            </h:commandLink>
                        </h:column>
                    </h:dataTable>
                </h:form>
            </div>
        </f:view>
    </h:body>
</html>

